<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" id="sidebar" class="sidebar">
    <!-- <el-scrollbar class="scrollbar-wrapper"> -->
    <!-- <div class="el-icon-user-solid subhead-headImg">
        <div>{{ username }}</div>
      </div> -->
    <!-- <div class="toggle-button" @click="toggleCollapse">|||</div> -->
    <!-- 侧边栏菜单区域 -->
    <el-menu
      background-color="rgb(35, 38, 46)"
      text-color="rgba(255,255,255,0.5)"
      active-text-color="rgba(255,255,255)"
      :default-active="$route.name"
      @select="handleSel"
      :collapse="isCollapse"
      :collapse-transition="false"
      :unique-opened="true"
      :router="true"
      v-if="sidebarList"
    >
      <div v-for="(item, index) in sidebarList" :key="index">
        <tree-menu :treedata="item"></tree-menu>
      </div>
    </el-menu>
    <!-- </el-scrollbar> -->
  </el-aside>
</template>
<script>
// import path from "path";
import treeMenu from "@/view/home/treemenu";

export default {
  name: "sidebar",
  components: {
    treeMenu,
  },
  data() {
    return {
      // 是否折叠
      isCollapse: false,
      openMenu: [],
      username: "",
      sidebarList: [],
    };
  },
  computed: {
    // sidebarList() {
    //   // return sideBar.mainbar();
    //   return sideBar
    // }
  },
  methods: {
    handleSel(key, keyPath) {
      // console.log(path.resolve(process.cwd(), ...keyPath));
      let sitePath = path.resolve(process.cwd(), ...keyPath);
      this.$router.push({ path: sitePath });
    },
    // 点击按钮，切换菜单的折叠与展开
    toggleCollapse() {
      // this.isCollapse = !this.isCollapse;
    },

    factorical(menuList) {
      return menuList
        .filter((item) => {
          // return menuCode.indexOf(item.code) > -1;
          return item.meta.hiddn == true;
        })
        .map((item) => {
          item = Object.assign({}, item);
          if (item.children) {
            item.children = this.factorical(item.children);
          }
          return item;
        });
    },
  },
  // created() {
  //   // this.setSidebarList('mainbar')
  //   this.sidebarList.forEach((item) => {
  //     this.openMenu.push(item.key);
  //   });
  // },
  mounted() {
    let arr = this.$router.options.routes;

    // console.log(arr)

    let oneLevel = arr.filter((item) => {
      return item.name != "Home";
    });

    let secondLevel = arr.filter((item) => {
      return item.name == "Home";
    });

    let resluts = oneLevel.concat(secondLevel[0].children)

    this.sidebarList = this.factorical(resluts);

    // console.log(this.sidebarList);
  },
};
</script>
<style lang="scss" scope>
.el-menu {
  border: 0;
}
</style>